<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>计数器</title>
    <link rel="stylesheet" href="./css/index.css">
  </head>
  <body>
    <div id="app">
      <!-- 计数器 -->
      <div class="input-num">
        <button @click="sub">
          -
        </button>
        <span>{{ num }}</span>
        <button @click="add">
          +
        </button>
      </div>
      <img
      src="http://www.itheima.com/images/logo.png"
      alt=""
    />
    </div>
  </body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 编码 -->
<script>
  // 创建Vue实例
  var app = new Vue({
    el: "#app",
    data: {
      num: 1,
      min: 0,
      max: 10
    },
    methods: {
      sub() {
        if (this.num > this.min) {
          this.num--;
        } else {
          alert("别点啦,到底啦");
        }
      },
      add() {
        if (this.num < this.max) {
          this.num++;
        } else {
          alert("别点啦,到头啦");
        }
      }
    }
  });
</script>
